<template>
  <div id="map_container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 导入方法
import { location, parkingMarker } from "./mapFunction";
import { mapActions, mapState } from 'vuex'
window._AMapSecurityConfig = {
  securityJsCode: "2d2a5f5eaef9995554d8b572561136b1",
};
export default {
  name: "Map",
  data() {
    return {
      map: null,
      // 地图是否加载完成
      mapStatus: false,
    };
  },
  mounted() {
    this.initMap();
    this.$bus.$on('location', () => {
      this.mapStatus && location(this.map)
    })
    this.getParking()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "02b3b7548cbd3fb6cbae4b49374abdfb",
        version: "2.0",
        plugins: ["AMap.Geolocation", "AMap.Walking"], // 需要用到的高德插件
      }).then((AMap) => {
          this.map = new AMap.Map("map_container", {
            viewMode: "3D",
            zoom: 16,
            // center: [106.307184,29.593223], //初始化地图中心点位置
          });
          // 地图加载完成
          this.map.on("complete", () => {
            this.mapStatus = true;
            location(this.map);
            // 停车场图标
            parkingMarker(this.map, this.parkingList)
            this.chooseCar()
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 获取停车场
    ...mapActions('parkingAbout', ['getParking']),
    // 获取停车场车辆
    chooseCar() {
      const cars = document.querySelectorAll('#text_id')
      const _this = this
      cars.forEach(item => {
        item.addEventListener('click', function(e) {
          e.stopPropagation()
          const id = this.getAttribute('text_id')
          localStorage.setItem('id', id)
          _this.$router.push({ name: 'Car', query: {id}});
        })
      })
    }
  },
  computed: {
    ...mapState('parkingAbout', ['parkingList'])
  },
};
</script>

<style lang="scss" scoped>
#map_container {
  width: 100%;
  height: 100vh;
  position: relative;
}
</style>